<template>
  <div class="log-box wrap scrollBar">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="操作日志" name="1">
        <div class="handleLog">
          <h1 class="title">详情描述</h1>
          <!-- 日志内容 -->
          <div class="logContent">
            <el-timeline>
              <el-timeline-item
                placement="top"
                v-for="(activity, index) in logsArray"
                :key="index"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp"
              >
                <p>{{ activity.content }}</p>
              </el-timeline-item>
            </el-timeline>
          </div>

          <button>刷新</button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="运行日志" name="2">
        <div class="handleLog">
          <h1 class="title">详情描述</h1>
          <!-- 日志内容 -->
          <div class="logContent">
            这是一种最基本的概括文章主要内容的方法。一篇文章可以分为几个部分，
            每个部分都概括出它的主要意思，
          </div>
          <button>刷新</button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="日志下载" name="3">
        <div class="logDownload">
          <div class="searchTitle">
            <div class="left">
              <!-- <span>按类型查找:</span>
              <el-radio-group
                v-model="radio"
                :disabled="tableData.length == 0 ? true : false"
              >
                <el-radio :label="1">操作日志</el-radio>
                <el-radio :label="2">运行日志</el-radio>
              </el-radio-group> -->
              <span>按时间查找: </span>
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                :disabled="tableData.length == 0 ? true : false"
              >
              </el-date-picker>
            </div>
            <div class="right">
              <el-button
                type="all"
                @click="downloadAll"
                :disabled="tableData.length == 0 ? true : false"
                >批量下载</el-button
              >
            </div>
          </div>
          <!-- 列表 -->
          <div class="listData">
            <el-table
              ref="multipleTable"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              v-loading="loading"
              element-loading-text="正在加载,请稍后..."
            >
              <template slot="empty">
                <div class="emptyData">
                  <img
                    src="~@/assets/images/status/nodata.png"
                    alt=""
                    srcset=""
                  />
                  <div style="margin-left: 20px">暂无数据</div>
                </div>
              </template>

              <el-table-column
                type="selection"
                width="55"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="序号"
                type="index"
                width="65"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="logName"
                label="日志名称"
                min-width="170"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="type"
                label="文件类型"
                min-width="100"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="startTime"
                label="日志开始时间"
                min-width="170"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="日志结束时间"
                min-width="170"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="logSize"
                label="日志大小"
                min-width="100"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                header-align="center"
                align="center"
                min-width="100"
              >
                <template slot-scope="scope">
                  <img src="../../assets/images/iconAll/download.png" alt="" />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 翻页 -->
          <div class="pagination" v-if="tableData.length > 0">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next,jumper"
              :total="totals"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 确认下载框 -->
    <el-dialog
      :title="title"
      :visible.sync="isDown"
      width="500px"
      center
      custom-class="confirmInfo"
      top="30vh"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <img src="~@/assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div class="content">删除该数据后不能恢复，是否确定删除!</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="fou" @click="downT(1)">取消</el-button>
        <el-button type="shi" @click="downT(2)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/list.less";
export default {
  name: "logManagement",
  data() {
    return {
      title: "提示",
      activeName: "1",
      radio: "",
      // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
      value1: "",
      multipleSelection: [], //选中的数据
      delarr: [], //存放下载的数据
      tableData: [
        {
          date: "2016-05-01",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-08",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-06",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-07",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-08",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-06",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-07",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-08",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-06",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
        {
          date: "2016-05-07",
          type: "操作日志",
          logName: "2021_ _08_ 13_ _01.t",
          startTime: "2021-8-13 13:22:07",
          endTime: "2021-8-13 13:22:07",
          logSize: "25M",
        },
      ],
      // tableData: [],
      currentPage: 1, // 页码数
      totals: 200,
      pageSize: 10,
      pageNumber: 1,
      loading: false,
      isDown: false,
      // 时间线日志
      logsArray: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#20b1aa",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#0bbd87",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#20b1aa",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#0bbd87",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#20b1aa",
        },
        {
          content: "支持使用图标dgs第三方更时光飞逝电饭锅电饭锅十多个森岛帆高森岛帆高森岛帆高水电费公司的分公司电饭锅十多个水电费公司的分公司森岛帆高水电费公司的分公司的分公司电饭锅山东分公司的分公司电饭锅山东分公司大方个森岛帆高是的分公司电饭锅森岛帆高森岛帆高是第三点符合谁让他和认同和认同感人上人按位或武汉市人他回办公室多行输入输入过上午活闪电发货",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#0bbd87",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#20b1aa",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#0bbd87",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#20b1aa",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#0bbd87",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#20b1aa",
        },
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
          color: "#0bbd87",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 批量下载
    downloadAll() {
      let length = this.multipleSelection.length;
      if (length > 0) {
        this.isDown = true;
        console.log(this.multipleSelection);
        for (var i = 0; i < length; i++) {
          // this.delarr.push(this.multipleSelection[i].articleIdStr);
        }
      } else {
        this.$message({
          type: "warning",
          message: "请选择需要下载的数据!",
          offset: "150",
          duration: "1500",
        });
      }
    },
    downT(type) {
      if (type === 1) {
        this.isDown = false;
        this.$message("已取消!");
        this.$refs.multipleTable.clearSelection();
      } else {
        this.isDown = false;
        this.$message({
          type: "success",
          message: "已下载!",
          offset: "150",
          duration: "1500",
        });
      }
    },
    // 选中的值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange: function (val) {
      this.pageNumber = 1;
      this.pageSize = val;
      this.currentPage = 1;
      // this.getList();
    },
    // 当前页
    handleCurrentChange: function (val) {
      this.pageNumber = val;
      // this.getList();
    },
  },
};
</script>
<style lang="less">
.log-box {
  .el-tabs__nav-wrap {
    padding-left: 20px;
  }
  .el-tabs__item {
    font-weight: bold;
    color: #504a4a;
    font-size: 14px;
  }
  .el-tabs__item.is-active {
    color: #396aff;
  }
  .el-tabs__active-bar {
    background-color: #396aff;
  }
  .el-radio__inner {
    border-color: #409eff;
    width: 14px;
    height: 14px;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border: 2px solid #527dff;
    background-color: #fff;
  }
  .el-radio__inner::after {
    background-color: #527dff;
    width: 6.5px;
    height: 6.5px;
  }
  .el-radio-group {
    margin-right: 30px;
  }
}
</style>
<style lang='less' scoped>
.log-box {
  .handleLog {
    height: 520px;
    width: 100%;
    background-color: #fff;
    border-radius: 6px;
    padding: 12px 20px;
    box-sizing: border-box;

    .title {
      color: rgba(75, 89, 124, 0.8);
      font-size: 13px;
      margin-bottom: 5px;
      font-family: "Microsoft YaHei";
      font-weight: 600;
    }
    .logContent {
      height: 400px;
      width: 100%;
      // background-color: #f1f1f4;
      box-sizing: border-box;
      padding: 20px;
      margin-bottom: 10px;
      border-radius: 4px;
      font-size: 13px;
      color: #4c5967;
      overflow-x: hidden;
      overflow-y: auto;
      /*滚动条样式 */
      &::-webkit-scrollbar {
        width: 4px;
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
        height: 4px;
      }

      &:hover::-webkit-scrollbar-thumb {
        background: hsla(180, 1%, 64%, 0.6);
      }

      &:hover::-webkit-scrollbar-track {
        background: hsla(0, 0%, 53%, 0.1);
      }
    }
    button {
      color: #fff;
      background-color: #0ec4b6;
      width: 80px;
      height: 32px;
      border: none;
      outline: none;
      border-radius: 5px;
      font-size: 13px;
      cursor: pointer;
      margin-top: 15px;
      margin-left: 50%;
      transform: translateX(-50%);
    }
  }
  .logDownload {
    .searchTitle {
      width: 100%;
      height: 65px;
      line-height: 65px;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 20px;
      margin-bottom: 10px;
      border-radius: 12px;
      .left {
        float: left;
        color: #444444;
        font-size: 13px;
        span {
          margin-right: 20px;
        }
        .el-radio__label {
          font-size: 13px;
        }
      }
      .right {
        float: right;
        .el-button--all {
          width: 80px;
          height: 32px;
          text-align: center;
          color: #fff;
          font-size: 13px;
          background-color: #29c5ec;
          border-color: #29c5ec;
          padding: 0;
          &:focus,
          &:hover {
            color: #fff;
            background-color: #29c5ec;
            border-color: #29c5ec;
          }
        }
      }
    }
  }
  // 确认框
  .confirmInfo {
    .el-dialog__header {
      padding: 10px 0 0 0;
      line-height: 34px;

      img {
        width: 25px;
        height: 25px;
        vertical-align: revert;
        margin-right: 5px;
      }

      span {
        font-size: 14px;
        color: #4c5967;
        vertical-align: super;
      }
    }

    .content {
      margin-top: 10px;
      font-size: 14px;
      text-align: center;
    }
  }
}
</style>
<style lang="less">
.logContent {
  .el-timeline-item__content {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
  }
}
</style>

